<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
</head>
<body>
<div id="div1">
    <form enctype="">
        <input id="user_account"><br/>
        <input name="user_password"  class="user_password"><br/>
        <!-- button不要忘了指定按钮类型 -->
        <button type="button" onclick="btn_click()">提交</button>
    </form>
</div>
</body>
<script>
    // //原生AJAX异步登陆---POST      接受的数据有两种json  xml  不过一般选用的是json
    // function btn_click(){
    //     var data = {
    //         //通过ID获取值
    //         "user_account" : document.getElementById("user_account").value,
    //         //通过name获取值  计算机是从0第一个开始的
    //         "user_password" : document.getElementsByName("user_password")[0].value
    //         //通过class获取值
    //         //"user_password" : document.getElementsByClassName("user_password")[0].value
    //         //通过标签名获取值
    //         //"user_password" : document.getElementsByTagName("input")[1].value
    //     }
    //     //创建一个ajax对象
    //     let xmlhttp = new XMLHttpRequest();
    //     //1.打开请求,true是异步请求，默认是同步请求false
    //     xmlhttp.open("POST","/user/login",true);
    //     //2.重新设置一下请求的方式
    //     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //     //3.发送请求
    //     xmlhttp.send("user_account="+document.getElementById("user_account").value+"&user_password="+document.getElementsByName("user_password")[0].value);
    //     //4.返回结果
    //     xmlhttp.responseText;
    //     //定时器再不短的判断是否已经赋值，只要赋上值就指定if内的代码
    //     setInterval(function aaa(){
    //         if(xmlhttp.responseText != ''){
    //             location.href = "http://www.baidu.com";
    //         }
    //     },200);
    //     document.getElementById("div1").innerHTML = "<img src='loading.gif'></img>";
    //     //5.通过控制台输出内容
    //     console.log(xmlhttp);
    // }


    //原生AJAX异步登陆--GET
    function btn_click(){
        var data = {
            //通过ID获取值
            "user_account" : document.getElementById("user_account").value,
            //通过name获取值
            "user_password" : document.getElementsByName("user_password")[0].value
            //通过class获取值
            //"user_password" : document.getElementsByClassName("user_password")[0].value
            //通过标签名获取值
            //"user_password" : document.getElementsByTagName("input")[1].value
        }
        //创建一个ajax对象
        let xmlhttp = new XMLHttpRequest();
        //1.打开请求,true是异步请求，默认是同步请求false
        let url = "/user/login?user_account="+document.getElementById("user_account").value+"&user_password="+document.getElementsByName("user_password")[0].value
        xmlhttp.open("GET",url,true);
        //2.发送请求
        xmlhttp.send(null);
        //3.返回结果
        xmlhttp.responseText;
        //定时器再不短的判断是否已经赋值，只要赋上值就指定if内的代码
        setInterval(function aaa(){
            if(xmlhttp.responseText != ''){
                location.href = "http://www.baidu.com";
            }
        },200);
        document.getElementById("div1").innerHTML = "<h1>等等等……</h1>";
        //5.通过控制台输出内容
        console.log(xmlhttp);
    }

</script>

</html>
